<template>
    <div class="setting">
        <header-nav></header-nav>
        <div class="container">
            <div class="right">
                <side-bar></side-bar>
                <side-bar-top></side-bar-top>
            </div>
            <div class="content">
                <div class="panel">
                    <div class="header">
                        <router-link :to="'/'">
                            <span class="icons fontS18 no-padding"><i class="fa fa-home"></i></span>
                        </router-link>
                        <span class="fontC2">/ </span>
                        <span class="selfCenter">设置</span>
                    </div>
                    <div class="inner">
                        <ul class="form-list">
                            <li>
                                <label for="" class="label">用户名</label>
                                <div class="ipt-box"><input type="text" :value="userInfo.name" disabled></div>
                            </li>
                            <li>
                                <label for="" class="label">邮箱</label>
                                <div class="ipt-box"><input type="text" :value="userInfo.email" disabled></div>
                            </li>
                            <li>
                                <label for="" class="label">个人网站</label>
                                <div class="ipt-box"><input type="text" v-model="userInfo.url"></div>
                            </li>
                            <li>
                                <label for="" class="label">所在地点</label>
                                <div class="ipt-box"><input type="text" v-model="userInfo.location"></div>
                            </li>
                            <li>
                                <label for="" class="label">性别</label>
                                <div class="ipt-box clear">
                                    <label for="boy" class="label2 left">
                                        <input type="radio" id="boy" name="sex" value="boy" v-model="userInfo.sex" class="radio left">
                                        <span class="left">程序猿</span> 
                                    </label>
                                    <label for="girl" class="label2 left">
                                        <input type="radio" id="girl" name="sex" value="girl" v-model="userInfo.sex" class="radio left">
                                        <span class="left">程序媛</span> 
                                    </label>
                                </div>
                            </li>
                            <li>
                                <label for="" class="label">恋爱状态</label>
                                <div class="ipt-box clear">
                                    <label for="single" class="label2 left">
                                        <input type="radio" id="single" value="single" v-model="userInfo.love_state" name="love_state" class="radio left">
                                        <span class="left">单身狗</span> 
                                    </label>
                                    <label for="have_lover" class="label2 left">
                                        <input type="radio" id="had_lover" value="had_lover" v-model="userInfo.love_state" name="love_state" class="radio left">
                                        <span class="left">名花有主</span> 
                                    </label>
                                </div>
                            </li>
                            <li>
                                <label for="signature" class="label">个性签名</label>
                                <div class="ipt-box"><textarea id="signature" v-model="userInfo.signature"></textarea></div>
                            </li>
                            <li>
                                <div class="ipt-box">
                                    <input type="button" class="submit" @click="onSubmit()" value="确认设置">
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

</template>

<script>
    import HeaderNav from "@/components/header/header"
    import SideBar from "@/components/sidebar/sidebar"
    import SideBarTop from "@/components/sidebar/sidebartop"
    import {mapState, mapActions} from 'vuex'
    import { updateUserInfo, getUser } from "@/service/api"
    import { getStore, relativeTime } from "@/config/mUtils"

    export default {
        data() {
            return {
                userInfo: {
                    url: '',
                    sex: '',
                    love_state: '',
                    signature: '',
                    location: ''
                }
            }
        },
        mounted(){
            this.getUser()
        },
        computed: {

        },
        methods: {
            days(time) {
                return relativeTime(time)
            },
            async getUser() {
                let param = {
                    user_id: getStore('user_id')
                }
                let res = await getUser(param)
                if (res.code) {
                    this.userInfo = res.result
                    this.userInfo.url = res.result.url
                } else {
                    console.log(res.msg)
                }
            },
            async onSubmit() {
                let param = {
                    url: this.userInfo.url,
                    sex: this.userInfo.sex,
                    love_state: this.userInfo.love_state,
                    signature: this.userInfo.signature,
                    location: this.userInfo.location
                }
                let res= await updateUserInfo(param)
                // console.log(res)
                if(res.code) {
                    this.$message({
                        message: res.msg,
                        type: 'success'
                    })
                    this.getUser()
                } else {
                    this.$message.error(res.msg);
                }
            }
           
        },
        components: {
            HeaderNav,
            SideBar,
            SideBarTop
        }
    }
</script>

<style lang="scss" scoped >
    @import '../../style/mixin';

    .setting {
        .container {padding-top: 20px;}
        .form-list {
            li {
                @include lh(50px);
            }
            .label {
                width: 200px;
                text-align: right;
                float: left;
                color: $fontC2;
            }
            .ipt-box {
                padding-left: 210px;
                input[type="text"] {
                    min-width: 300px;
                    padding: 5px 10px;
                    color: $fontC3;
                    border: 1px solid $iptBold;
                    border-radius: 3px;
                    overflow: hidden;
                    &:focus {
                        border: 1px solid $main;
                        // outline: $mian;
                    }
                }
                .label2 {
                    color: $fontC3;
                    margin-right: 20px;
                    .radio {
                        margin-right: 8px;
                        margin-top: 19px;
                    }
                }
                #signature {
                    min-width: 500px;
                    height: 50px;
                    border-radius: 3px;
                    overflow: hidden;
                    padding: 10px;
                    resize: none;
                    &:focus {
                        border: 1px solid $main;
                        outline: none;
                    }
                }
                .submit {
                    padding: 5px 10px;
                    border: 1px solid $main;
                    background-color: $main;
                    color: $fff;
                    font-size: 14px;
                    text-align: center;
                    border-radius: 3px;
                    &:hover {
                        opacity: 0.8;
                    }
                }
            }
        }
    }
    
</style>

